<template>
  <v-chart :autoresize="true" :manual-update="true" class="chart"
           theme="shine"
           ref="chart"/>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue';
import {getRealTimeSale} from '@/api/dataScreen';
import dayjs from "dayjs";
import {round} from "number-precision";

export default defineComponent({
  setup(props, context) {
    const state = reactive(new class {
      list = [] as any;
      yData = [] as any;
      seriesData = [] as any;
    });

    const chart = ref();

    const initOptions = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        position: function (p) { //其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10];
        },
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '30%',
        containLabel: true
      },
      legend: {
        data: ['移动支付', '现金'],
        x: 'right',
        top: '3%',
        left: '60%',
        itemWidth: 10,//图例的宽度
        itemHeight: 10,//图例的高度
        textStyle: {//图例文字的样式
          color: '#fff',
          fontSize: '0.65rem'
        }
      },
      xAxis: [
        {
          show: true,
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem'
            },
            // rotate: 20,
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(211 ,211 ,211,0.5)'
            }
          },
          axisTick: {show: false},
          splitLine: {
            show: false
          },

        }
      ],
      yAxis: [
        {
          show: true,
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem'
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(211 ,211 ,211,0.5)'
            }
          },
          axisTick: {show: false},
          splitLine: {
            show: false
          },

        }],
    };

    async function getData(stationCode: number, searchDate: any) {
      state.list = await getRealTimeSale(stationCode, dayjs(searchDate[0]).format('YYYY-MM-DD'), dayjs(searchDate[1]).format('YYYY-MM-DD'));
      if (state.list && state.list[0]) {
        dealChartData();
      }
    }

    function dealChartData() {
      state.yData = [];
      state.seriesData[0] = [];
      state.seriesData[1] = [];
      for (let item of state.list) {
        state.yData.push(item['油品名称']);
        for (let key in item) {
          if (key === "实收金额(移动支付)") {
            state.seriesData[0].push(item[key]);
          } else if (key === "实收金额(现金)") {
            state.seriesData[1].push(item[key]);
          }
        }
      }
      let max = state.seriesData[0].reduce(function (a, b) {
        return b > a ? b : a;
      });
      chart.value.setOption(initOptions);
      chart.value.setOption({
        xAxis: {
          max: round(max * 1.3, 0)
        },
        yAxis: {
          data: state.yData
        },
        series: [{
          name: '移动支付',
          type: 'bar',
          stack: '总量',
          itemStyle: {
            normal: {
              color: {
                type: 'linear',
                colorStops: [
                  // !! 在此添加想要的渐变过程色 !!
                  {offset: 0, color: '#7bbfea'},
                  {offset: 0.5, color: '#33a3dc'},
                  {offset: 1, color: '#228fbd'}
                ]
              },
            }
          },
          label: {
            show: true,
            position: 'right',
            textStyle: {
              color: '#fff',
              fontSize: '0.65rem'
            },
            formatter(data) {
              return data.value + "万元";
            }
          },
          data: state.seriesData[0]

        },
          {
            name: '现金',
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  colorStops: [
                    // !! 在此添加想要的渐变过程色 !!
                    {offset: 0, color: '#73b9a2'},
                    {offset: 0.5, color: '#72baa7'},
                    {offset: 1, color: '#00ae9d'}
                  ]
                },
              }
            },
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff',
                fontSize: '0.65rem'
              },
              formatter(data) {
                return data.value + "万元";
              }
            },
            data: state.seriesData[1]
          },]
      });
    }


    return {
      getData,
      chart
    }

  }
});
</script>

<style scoped>
</style>
